<!-- Header -->
<header id="header" role="banner">
<!-- Header meta -->
<div class="header_meta" class="sticky header_meta">
  <div class="container">

    <!-- Weather -->
    {% include weather.html %}

    <!-- Scroll Up -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
                $('#return-to-top').fadeIn(200); // Fade in the arrow
            }
            else {
                $('#return-to-top').fadeOut(200); // Else fade out the arrow
            }
        });
        $('#return-to-top').click(function () { // When arrow is clicked
            $('body,html').animate({
                scrollTop: 0 // Scroll to top of body
            }, 500);
        });
    });
    </script>
    <!-- Scroll Up End -->

    <!-- Position detection -->
    {% if page.toc %}
    <script>
    var jWindow = $(window);
    jWindow.scroll(function(){
      var scrollHeight = jWindow.scrollTop();
      var screenHeight = jWindow.height();
      var screenWidth = jWindow.width();
      var postHeight = $('#post_content').height() + 150;
      var footerHeight = $('#footer').height();
      if(scrollHeight > 600 && scrollHeight < postHeight && screenWidth > 1000){
        $('#fixtoc').css({
          'position':'fixed',
          'top':'75px',
          'z-index': '0'
        });
      }else{
        $('#fixtoc').css({
          'position':'static'
        });
      }
    });

    window.onload = function(){
      jWindow.trigger('scroll');
    };
    jWindow.resize(function(){
      jWindow.trigger('scroll');
    });
    </script>
    {% endif %}
    <!-- End postion detection -->

    <!-- Top menu -->
    <nav class="top_navigation" role="navigation">
      <span class="top_navigation_toggle"><i class="fa fa-reorder"></i></span>
      <ul class="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/blog/">Blog</a></li>
        <li class="menu-item-has-children"><a href="#">Pages</a>
            <span class="top_sub_menu_toggle"></span>
            <ul class="sub-menu">
                <li><a href="/404.html">404 Page</a></li>
                <li><a href="/tags/">Tags</a></li>
                <li><a href="/categories/">Categories</a></li>
                <li><a href="/shortcodes/">Shortcodes</a></li>
                <li><a href="/archieves/">Blog Archieve</a></li>
            </ul>
        </li>
        <li><a href="/shortcodes/">Shortcodes</a></li>
        <li class="search_icon_form"><a href="#"><i class="fa fa-search"></i></a>
          <div class="sub-search">
            <form action="/search/" target="_blank" method="get">
              <input type="search" name=q size=40 placeholder="Search in site...">
              <input type="submit" value="Search">
            </form>
          </div>
        </li>
      </ul>
    </nav><!-- End Top menu -->
  </div>
</div><!-- End Header meta -->
<!-- Header main -->
<div id="header_main" class="sticky header_main">
    <div class="container">
        <!-- Logo -->
        <div class="site_brand">
            <h1 id="site_title"><a href="/">Frank's<span>Blog</span></a></h1>
            <h2 id="site_description">Coding and recording...</h2>
        </div><!-- End Logo -->
        <!-- Site navigation -->
        <nav class="site_navigation" role="navigation">
          <span class="site_navigation_toggle"><i class="fa fa-reorder"></i></span>
          <ul class="menu">
            <li><a href="/">Home</a></li>
            <li><a href="/blog/">Blog</a></li>
            {% include megamenu.html %}
          </ul>
        </nav><!-- End Site navigation -->
    </div>
</div><!-- End Header main -->

{% if page.math %}
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>
<!-- MathJax -->
{% endif %}

</header><!-- End Header -->
